import React, { Component } from 'react'

import { Provider, Consumer } from './context-obj'
console.log('ctx', { Provider, Consumer })
// 子组件
class Child extends Component {
  render() {
    return (
      <div>
        <h2>子组件</h2>
        <hr />
        <Son></Son>
      </div>
    )
  }
}
// 孙子组件
const Son = () => {
  const getApp = (data) => {
    console.log('接收到爷爷组件数据', data)
    // return data.age + data.name
  }
  return (
    <div>
      <h3>孙子组件</h3>
      {/* 写法一 */}
      <Consumer>{(data) => <h4>{data.name}</h4>}</Consumer>
      {/* 写法二 */}
      <Consumer>{getApp}</Consumer>
    </div>
  )
}
export default class App extends Component {
  state = {
    obj: {
      name: '大黄',
      age: 10,
    },
  }
  render() {
    return (
      <Provider value={this.state.obj}>
        <h1>App</h1>
        <Child></Child>
      </Provider>
    )
  }
}
